<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字溢出显示省略号</title>
		<style>
			div {
				width: 180px;
				height: 43px;
				border: 1px solid red;
				/* 一行文字省略号的显示 */
				/* 1先强制把所有的内容在一行里显示 */
				/* 这是默认属性，自动换行 */
				/* white-space: normal; */
				/* white-space: nowrap; */
				/*2 超出部分隐藏 */
				/* overflow: hidden; */
				/* 3 超出部分要显示出来省略号 */
				/* text-overflow: ellipsis; */
				
				/* 多行文本溢出显示省略号 */
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 显示显示多少行的文本 */
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒子对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
		</style>
	</head>
	<body>
		<div>程序员的梦工厂程序员的梦工厂程序员的梦工厂程序员的梦工厂程序员的梦工厂</div>
	</body>
</html>